import { Outlet, NavLink } from 'react-router-dom'
import '@/assets/css/home.scss'
import { Layout,Menu } from 'antd'
import React,{ useEffect, useState } from 'react'
import {WindowsOutlined,TrademarkCircleOutlined,UserOutlined} from '@ant-design/icons'
//导入api
import api from '@/api'
//导入接口
import IMenuData from '@/types/IMenuData'
import IMenu from '@/types/IMenu'
import IMenuFun from '@/types/IMenuFun'
//导入图标
import * as icons from '@ant-design/icons'
//导入useSelector和useDispatch
// import {useSelector,useDispatch} from 'react-redux'
//使用ts的话，hooks使用的是useAppSelector来代替useSelector,使用useAppDispatch来替换useDispatch
import {useAppSelector,useAppDispatch} from '@/store/hooks'
//导入通知对象
import {getRoutesAsync} from '@/store/modules/routesReducer'
//导入routes
import routes from '@/router'

import {useNavigate} from 'react-router-dom'


const { Header, Sider, Content, Footer } = Layout
export default () => {
    const[menuList,setMenuList]=useState<Array<any>>([])
    useEffect(()=>{
        getAuthMenus()
    },[])
    
    const dispatch=useAppDispatch()
    const nav=useNavigate()
    /**
     * 通过token向后端服务端获取权限数据
     */
    const getAuthMenus=async()=>{
      const result=await api.users.getAuthMenus()
      //进行转换
      const list:Array<IMenu>=transformDataToMenu(result.data.data)
      setMenuList(list)
      //向状态机发送通知操作路由表
      dispatch(getRoutesAsync(routes))

    }
    //入参   返回值：出参
    const transformDataToMenu:IMenuFun=(list:Array<IMenuData>)=>{
      return list.map((item:IMenuData)=>{
        const iconName=item.icon//类型断言
        const icc:any=icons[iconName as keyof typeof icons]
        let result:IMenu={
          key:item.path,
          label:item.title,
          icon:React.createElement(icc)
        }
        if(item.children){
          result.children=transformDataToMenu(item.children)
        }
        return result
      })
    }

    const go=(values:any)=>{
      console.log('valiues',values)
      nav(values.key)
    }
    return (
        <Layout>
            <Header style={{ color: '#fff' }}>蜗牛BOSS系统</Header>
            <Layout style={{ height: '750px' }}>
                <Sider>
                    <Menu
                        onClick={go}
                        items={menuList}
                        theme="dark"
                        mode="inline">

                    </Menu>
                </Sider>
                <Content>
                    <Outlet></Outlet>
                </Content>
            </Layout>
            <Footer>&copy;版权前端10期班所有</Footer>
        </Layout>
    )
}